<template>
	<view class="cartoon-page">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower" @scroll="scroll">
			<view class="cartoon-warp" @click="show = !show">
				<block v-for="(item,index) in pageList" :key="index">
					<image :src="item.image" mode='widthFix' style="width: 100%;" lazy-load="true"></image>
				</block>
			</view>
		</scroll-view>
		<u-popup :show="directoryShow" width="90%" mode="left" @close="directoryShow = false">
			<view class="directory">
				<view class="title-box">
					<view class="title">
						<text class="text">连载中</text>
						<text style="font-size: 20rpx;">共{{chapterList.length}}话</text>
					</view>
					<view class="move" @click="chapterList.reverse()">
						倒叙
					</view>
				</view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-y" @scrolltolower="lower"
					@scroll="scroll">
					<view class="centent">
						<block v-for="(item,index) in chapterList" :key="item.chapter_id">
							<view class="item-box" @click="tabChapter(item.chapter_id,3)">
								<u--text :text="item.title" :color="item.chapter_id == chapter_id?'#e54033':''"
									size="14"></u--text>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-popup :show="show" mode="bottom" @close="show = false">
			<view class="nav-wrap">
				<view class="bullet-box">
					<view class="last-box">
						<view class="last" @click="tabChapter(chapter_id,1)">
							<image src="@/static/img/last.png"></image>
						</view>
						<view class="next" @click="tabChapter(chapter_id,2)">
							<image src="@/static/img/next.png"></image>
						</view>
					</view>
					<view class="bullet">
						<u--input placeholder="弹幕来一发可好,biu~" disabled shape="circle" border="surround" v-model="bullet">
						</u--input>
					</view>
				</view>
				<view class="tarbar">
					<block v-for="(item,index) in tars" :key="index">
						<view class="icon-item" @click="onPage(index)">
							<view class="icon">
								<image :src="item.icon" mode="widthFix"></image>
							</view>
							<view>{{item.text}}</view>
						</view>
					</block>
				</view>
			</view>
		</u-popup>
		<u-loading-page :loading="loading" font-size="14" color="#fb5f2c" loading-text="数据正在加载中...."
			image="/static/img/ycy.jpg" icon-size="80">
		</u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				pageList: {},
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				chapterList: [],
				bullet: '',
				show: false,
				chapter_id: 0,
				directoryShow: false,
				tars: [{
						icon: '/static/img/directory.png',
						text: '目录'
					},
					{
						icon: '/static/img/comments.png',
						text: '书友圈'
					}, {
						icon: '/static/img/night.png',
						text: '夜间'
					}, {
						icon: '/static/img/set.png',
						text: '设置'
					}
				]
			}
		},
		onLoad(o) {
			console.log(o);
			this.init(o.chapter_id)
			this.getChpater(o.comic_id, o.chapter_id)
		},
		methods: {
			async init(chapter_id) {
				const res = await this.$api.getCartoonPage({
					chapter_id
				})
				if (res.code == 200) {
					this.pageList = res.data
					this.chapter_id = chapter_id
				}
			},
			async getChpater(comic_id, chapter_id) {
				const res1 = await this.$api.getCartoonDetail({
					id: comic_id
				})
				if (res1.code == 200) {
					// console.log(res1, '详情');
					const {
						read,
						price,
						charge
					} = res1.data
					const user = uni.getStorageSync('user')
					const param = {
						comic_id,
						chapter_id,
						uid: user.id,
						read,
						price,
						is_vip: charge
					}
					const res2 = await this.$api.addRead(param)
				}
				const res = await this.$api.getCartoonChapter({
					comic_id,
					isAll: true
				})
				if (res.code == 200) {
					this.chapterList = res.data.data
					const item = this.chapterList.find(item => item.chapter_id == chapter_id)
					// this.chapter_id = item.chapter_id
					uni.setNavigationBarTitle({
						title: item.title
					})
				}
				this.loading = false
				// console.log(res);
			},
			// 切换章节
			tabChapter(id, type) {
				// const id = this.chapter_id
				console.log(id, type);
				const length = this.chapterList.length
				const index = this.chapterList.findIndex(item => item.chapter_id == id);
				let num = 0
				if (type == 1 && index != -1) {
					num = index - 1
					console.log(num, 'num');
					if (num < 0) {
						console.log('到底了');
						num = 0
						// wx.showToast({
						//     title: '当前是第一话',
						// })
						return
					}
				} else if (type == 3) {
					num = index
					this.directoryShow = false
				} else {
					num = index + 1

					if (num >= length) {
						console.log('已经是最新章节');
						// uni.showToast({
						//     title: '已经是最新章节',
						// })
						return
					}
				}
				console.log(num, '====>');
				const item = this.chapterList[num]
				this.chapter_id = item.chapter_id
				uni.setNavigationBarTitle({
					title: item.title,
				})
				console.log(num, item);
				this.init(item.chapter_id)
				this.getChpater(item.comic_id, item.chapter_id)
				this.show = false
				this.goTop()
			},
			lower(e) {
				// this.query.page += 1
				// this.isShow = true
				// this.getCartoonChapter()
			},
			scroll(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			},
			onPage(index) {
				console.log(index);
				switch (index) {
					case 0:
						this.show = false
						this.directoryShow = true
						break;
					default:
						break;
				}
			},
			onscroll(e) {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-Y {
		height: 100vh;
	}

	.scroll-y {
		height: 100vh;

		margin-top: 10rpx;

		.centent {
			.item-box {
				height: 90rpx;
				line-height: 90rpx;
			}
		}
	}

	.directory {
		padding: 20rpx;
		width: 500rpx;

		.title-box {
			display: flex;
			justify-content: space-between;
			background-color: rgb(246, 246, 246);
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 20rpx;
			border-radius: 10rpx;

			.title {
				.text {
					font-size: 28rpx;
					font-weight: 600;
					margin-right: 10rpx;
				}
			}

			.move {
				font-size: 26rpx;
			}

		}
	}

	.nav-wrap {
		.bullet-box {
			margin: 20rpx 0;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;

			.bullet {
				flex: 1;
				margin-left: 40rpx;
			}

			.last-box {
				display: flex;

				.last {
					// background-color: red;
					border: 2rpx solid #eee;
					border-top-left-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					margin-left: 20rpx;
				}

				.next {
					margin-left: 30rpx;
					border: 2rpx solid #eee;
					border-top-right-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
				}

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		.tarbar {
			display: flex;
			justify-content: space-evenly;
			height: 110rpx;
			// background-color: red;
			font-size: 20rpx;

			.icon-item {
				width: 25%;
				text-align: center;

				.icon {
					image {
						width: 60rpx;
					}
				}
			}

		}
	}
</style>
